<template>
  <div v-loading="loading">

    <el-row>
      <el-col :span="6">
        <day_picker
          v-model="date"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          @change="getdata"
          :picker-options="pickerOptions"
          placeholder="选择日期">
        </day_picker>
      </el-col>
      <el-col :span="9">
        <el-radio-group size="mini" v-model="value1">
          <el-radio-button v-for="item in menudata" :key="item" :label="item"></el-radio-button>
        </el-radio-group>
      </el-col>
      <el-col :span="9">
        <el-radio-group size="mini" v-model="value2">
          <el-radio-button label="精度0"></el-radio-button>
          <el-radio-button label="精度1"></el-radio-button>
          <el-radio-button label="精度2"></el-radio-button>
          <el-radio-button label="精度3"></el-radio-button>
        </el-radio-group>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="16">
        <el-card shadow="never" style="height:500px;margin-top: 10px">
        <span slot="header">
          <span>表格展示</span>
          <table-change @change="tableSize = $event" style="float: right;margin-top:4px;" />
          <div class="ic" style="float:right;margin-right:20px;height:30px;cursor: pointer;">
            <span class="grycolor" style="font-size:14px;">异常切换</span>
            <el-switch
              v-model="sValueFalse"
              :active-color="$themes.getSwitch().on"
              :inactive-color="$themes.getSwitch().down"
              style="margin-left:5px;margin-top:1px;"
            >
          </el-switch>
          </div>
        </span>
          <!--    :tree-props="{children: 'children'}" -->
          <el-table
            :size="tableSize"
            :cell-style="({ column })=>column.type==='index'&&'color:#999999'"
            :data="tableData"
            row-key="id"
            :height="480"
            :span-method="arraySpanMethod"
            @expand-change="queryData"
            :expand-row-keys="expands"
            :tree-props="{children: 'children'}"
            highlight-current-row
            style="width: 100%">

            <el-table-column
              align="left"
              label="原料分类"
              prop="unit"
              width="100">
            </el-table-column>
            <el-table-column type="expand" width="20">
              <template slot-scope="scope">
                <el-table :data="scope.row.srcchildren" :show-header="false">
                  <el-table-column
                    label="原料名称"
                    width="20">
                    <template></template>
                  </el-table-column>
                  <el-table-column
                    prop="processName"
                    label="原料名称"
                    width="120">
                  </el-table-column>
                  <el-table-column
                    prop="start"
                    label="期初库存">
                  </el-table-column>
                  <el-table-column
                    prop="dayPlan"
                    label="日购进计划">
                  </el-table-column>
                  <el-table-column
                    prop="dayActual"
                    label="日实际购进">
                    <template v-slot="{row}">
                      <el-tooltip v-if="row.content" :content="row.content" placement="right">
                        <span style="color: red">{{ row.address }}</span>
                      </el-tooltip>
                      <span v-else style="color: #000">{{ row.address }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="monthPlan"
                    label="月计划购进">
                  </el-table-column>
                  <el-table-column
                    prop="monthA"
                    label="月实际购进">
                  </el-table-column>
                  <el-table-column
                    prop="dayAE"
                    label="日实际消耗">
                  </el-table-column>
                  <el-table-column
                    prop="monthAE"
                    label="月实际消耗">
                  </el-table-column>
                  <el-table-column
                    prop="end"
                    label="期末库存">
                  </el-table-column>
                  <el-table-column
                    prop="port"
                    label="港口库存">
                  </el-table-column>
                  <el-table-column
                    prop="inventory"
                    label="安全合理库存">
                  </el-table-column>
                  <el-table-column
                    prop="subtract"
                    label="库存修正量">
                  </el-table-column>
                  <el-table-column
                    prop="days"
                    label="预估使用天数"
                    width="120">
                  </el-table-column>
                </el-table>
              </template>
            </el-table-column>
            <el-table-column
              prop="processName"
              label="原料名称"
              width="120">
            </el-table-column>
            <el-table-column
              prop="start"
              label="期初库存">
            </el-table-column>
            <el-table-column
              prop="dayPlan"
              label="日购进计划">
            </el-table-column>
            <el-table-column
              prop="dayActual"
              label="日实际购进">
              <template v-slot="{row}">
                <el-tooltip v-if="row.content" :content="row.content" placement="right">
                  <span style="color: red">{{ row.address }}</span>
                </el-tooltip>
                <span v-else style="color: #000">{{ row.address }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="monthPlan"
              label="月计划购进">
            </el-table-column>
            <el-table-column
              prop="monthA"
              label="月实际购进">
            </el-table-column>
            <el-table-column
              prop="dayAE"
              label="日实际消耗">
            </el-table-column>
            <el-table-column
              prop="monthAE"
              label="月实际消耗">
            </el-table-column>
            <el-table-column
              prop="end"
              label="期末库存">
            </el-table-column>
            <el-table-column
              prop="port"
              label="港口库存">
            </el-table-column>
            <el-table-column
              prop="inventory"
              label="安全合理库存">
            </el-table-column>
            <el-table-column
              prop="subtract"
              label="库存修正量">
            </el-table-column>
            <el-table-column
              prop="days"
              label="预估使用天数"
              width="120">
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card id="posts" shadow="never" style="height:500px;margin-top: 10px;margin-left: 12px">
          <span slot="header">
          <span>精粉趋势图</span>

          <div style="float:right;width:8%;margin-left:12px;">
            <screenfull ref="screenfull" @changeFullScreen="isFullscreen = $event">
              <svg-icon class="circle" style="margin-right: 15px" :icon-class="screen"
                        @click="$refs.screenfull&&$refs.screenfull.click()" />
            </screenfull>
          </div>
          <div style="float:right;width:20%;">
              <el-input suffix-icon="el-icon-search" v-model="values" placeholder="请输入搜索内容"></el-input>
          </div>
          </span>
          <div style="height: 500px">
            <echart style="margin-top:-10px;height: 500px" :option="option1" />
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row style="margin-top:15px;">
      <el-col span="5-1">
        <el-card shadow="never" :style="{'height' : $isFF ? (lastHeight-300)+'px': (lastHeight-310)+'px'}">
          <span slot="header">
            <span style="font-weight: bold">矿粉小计</span>
          </span>
          <div>
            <echart style="margin-top:-40px;height: 320px" :option="option2" />
          </div>
        </el-card>
      </el-col>
      <el-col span="5-1">
        <el-card shadow="never"
                 :style="{'margin':'0px 0px 0px 12px', 'height' : $isFF ? (lastHeight-300)+'px': (lastHeight-310)+'px'}">
          <span slot="header">
            <span style="font-weight: bold">矿砂小计</span>
          </span>
          <div>
            <echart style="margin-top:-40px;height: 320px" :option="option2" />
          </div>
        </el-card>
      </el-col>
      <el-col span="5-1">
        <el-card shadow="never"
                 :style="{'margin':'0px 0px 0px 12px', 'height' : $isFF ? (lastHeight-300)+'px': (lastHeight-310)+'px'}">
          <span slot="header">
            <span style="font-weight: bold">焦炭小计</span>
          </span>
          <div>
            <echart style="margin-top:-40px;height: 320px" :option="option2" />
          </div>
        </el-card>
      </el-col>
      <el-col span="5-1">
        <el-card shadow="never"
                 :style="{'margin':'0px 0px 0px 12px', 'height' : $isFF ? (lastHeight-300)+'px': (lastHeight-310)+'px'}">
          <span slot="header">
            <span style="font-weight: bold">煤粉小计</span>
          </span>
          <div>
            <echart style="margin-top:-40px;height: 320px" :option="option2" />
          </div>
        </el-card>
      </el-col>
      <el-col span="5-1">
        <el-card shadow="never"
                 :style="{'margin':'0px 0px 0px 12px', 'height' : $isFF ? (lastHeight-300)+'px': (lastHeight-310)+'px'}">
          <span slot="header">
            <span style="font-weight: bold">废钢小计</span>
          </span>
          <div>
            <echart style="margin-top:-40px;height: 320px" :option="option2" />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import TableChange from "@/components/table-change/index.vue";
import Echart from "@/components/echart/index.vue";
import axios from "axios";

export default {
  name: "demo1",
  components: { Echart, TableChange },
  data() {
    return {
      tableSize: 0,
      value1: "原料总览",
      value2: "精度0",
      sValueFalse: false,
      date: "2023-02-13",
      loading: false,
      values: "",
      tableData: [],
      spanData: [],
      pos: null,
      expands: [],
      pickerOptions: {
        disabledDate(time) {
          return (time.getTime() > Date.now() - 8.64e6);
        }
      },
      menudata: ["原料总览", "炼铁原料", "炼钢原料", "港口原料", "料仓原料", "钢坯原料", "成品库存", "尾渣制转"],
      option1: {
        backgroundColor: "#fff",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: "rgb(126,199,255)"
            }
          }
        },
        grid: {
          top: "15%",
          bottom: "5%",
          left: "5%",
          right: "5%",
          containLabel: true
        },
        legend: {
          data: ["现有库存", "安全库存", "日实际购进", "日实际消耗", "预估使用天数"],
          right: "15",
          top: "15",
          icon: "rect",
          textStyle: {
            padding: [4, 0, 0, 0],
            color: "33FFFF"
          },
          itemWidth: 15,
          itemHeight: 10
          // itemGap: 25,
        },
        xAxis: {
          type: "category",
          data: ["申报", "受理", "获缴", "审批", "办证", "赴港澳"],
          axisLine: {
            lineStyle: {
              color: "rgba(66, 192, 255, .3)"
            }
          },
          axisLabel: {
            textStyle: {
              color: "#000"
            }
          }
        },
        yAxis: [
          {
            type: "value",
            max: 2000,
            splitLine: {
              show: true
            },
            axisLabel: {
              textStyle: {
                color: "#5FBBEB"
              }
            },
            axisLine: {
              lineStyle: {
                fontSize: 12,
                color: "rgba(66, 192, 255, .3)"
              }
            }
          },
          {
            type: "value",
            name: "(%)",
            nameTextStyle: {
              color: "#d2d2d2"
            },
            max: "100",
            min: "0",
            scale: true,
            position: "right",
            axisLine: {
              lineStyle: {
                color: "rgba(66, 192, 255, .3)"
              }
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: true,
              formatter: "{value} %", //右侧Y轴文字显示
              textStyle: {
                fontSize: 12,
                color: "#42C0FF"
              }
            }
          }
        ],
        series: [
          {
            name: "库存",
            type: "bar",
            barWidth: "12px",
            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: "rgba(51, 112, 255, 1)"
                  }, {
                    offset: 1,
                    color: "rgba(51, 112, 255, 0.1)"
                  }]
                },
                barBorderRadius: [30, 30, 0, 0]
              }
            },
            data: [300, 800, 400, 600, 700, 450, 678]
          },
          {
            name: "现有库存",
            type: "line",
            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
            smooth: true, //平滑曲线显示
            symbol: "circle", //标记的图形为实心圆
            symbolSize: 0, //标记的大小
            lineStyle: {
              color: "rgba(51, 112, 255, 1)"
            },
            data: [98, 38, 48, 35, 92, 28]
          },
          {
            name: "安全库存",
            type: "line",
            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
            smooth: true, //平滑曲线显示
            symbol: "circle", //标记的图形为实心圆
            symbolSize: 0, //标记的大小
            lineStyle: {
              color: "rgba(64, 223, 255, 1)"
            },
            data: [38, 98, 48, 35, 92, 28]
          },
          {
            name: "日实际购进",
            type: "line",
            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
            smooth: true, //平滑曲线显示
            symbol: "circle", //标记的图形为实心圆
            symbolSize: 0, //标记的大小
            lineStyle: {
              color: "rgba(61, 213, 152, 1)"
            },
            data: [38, 48, 98, 35, 92, 28]
          },
          {
            name: "日实际消耗",
            type: "line",
            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
            smooth: true, //平滑曲线显示
            symbol: "circle", //标记的图形为实心圆
            symbolSize: 0, //标记的大小
            lineStyle: {
              color: "rgba(255, 153, 94, 1)"
            },
            data: [38, 48, 35, 98, 92, 28]
          },
          {
            name: "预估使用天数",
            type: "line",
            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
            smooth: true, //平滑曲线显示
            symbol: "circle", //标记的图形为实心圆
            symbolSize: 0, //标记的大小
            lineStyle: {
              color: "rgba(157, 135, 255, 1)"
            },
            data: [38, 48, 35, 92, 98, 28]
          }

        ]
      },
      option2: {
        tooltip: {},
        gird: {
          top: 200
        },
        radar: {
          radius: "50%", //大小
          nameGap: 15, // 图中工艺等字距离图的距离
          center: ["50%", "35%"], // 图的位置
          name: {
            textStyle: { color: "#000" }
          },
          indicator: [
            { "name": "隆鹏", "max": "100" },
            { "name": "吉伟", "max": "100" },
            { "name": "旭阳", "max": "100" },
            { "name": "东辉", "max": "100" },
            { "name": "赤峰", "max": "100" }

          ],
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(221, 221, 221, 1)"
            }
          },
          splitArea: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              width: 1,
              color: "rgba(221, 221, 221, 1)" // 设置网格的颜色
            }
          }

        },

        series: [
          {
            type: "radar",
            symbol: "angle",
            itemStyle: {
              normal: {
                areaStyle: { type: "default" }
              }
            },
            data: [
              {
                symbol: "circle",
                symbolSize: 0,
                value: [70, 42, 63, 84, 75, 34],
                areaStyle: { color: "rgba(51, 112, 255, 0.2)" },
                lineStyle: {
                  color: "rgba(51, 112, 255, 1)",
                  width: 1
                }
              },
              {
                symbol: "circle",
                symbolSize: 0,
                value: [42, 63, 84, 75, 34, 70],
                areaStyle: { color: "rgba(61, 213, 152, 0.2)" },
                lineStyle: {
                  color: "rgba(61, 213, 152, 1)",
                  width: 1
                }
              }
            ]
          }
        ]
      }
    };

  },
  methods: {
    queryData(row, expandedRows,cellId) {
      // let that = this;
      // //只展开一行
      // if (expandedRows.length) { //说明展开了
      //   //alert(1);
      //   that.expands = [];
      //   if (row) {
      //     that.expands.push(row.id); //只展开当前行id
      //   }
      // } else { //说明收起了
      //   that.expands = [];
      // }
      // // 下面res是异步获取的数据
      // let res = [];
      // this.innerDataList = res;
      // this.arraySpanMethod(row, max = 10);
    },
    getdata() {
      this.$http.get("http://10.6.1.129/daily_reportapi/main.php?time=" + this.date).then((res) => {
        for (let i = 0; i < res.length; i++) {
          res[i].srcchildren = res[i].children;
          res[i].children = [];
        }
        this.tableData = res;
      });
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }, max) {
      if (!!!max) {
        max = 9;
      }
      console.log(max);
      if (columnIndex === 0) {
        if (rowIndex === 0) {
          return {
            rowspan: max,
            colspan: 1
          };
        } else if (rowIndex >= 1 && rowIndex < 9) {
          return {
            rowspan: 0,
            colspan: 0
          };
        } else {
          return {
            rowspan: 1,
            colspan: 1
          };
        }
      } else {
        return {
          rowspan: 1,
          colspan: 1
        };
      }
    },
    test() {
      var params1 = new URLSearchParams();
      params1.append("createDateStart", "2022-01-06");
      params1.append("createDateEnd", "2023-03-06");
      params1.append("pagesize", 10);
      params1.append("pageNum", 1);
      console.log(params1);
      axios.post("http://oa-admin.ejianlong.com/public/oa/T00KD002/fuShunList", params1).then((res) => {

      });

    }
  },
  computed: {
    documentHeight() {
      return this.$store.getters.documentHeight;
    },
    lastHeight() {
      const hei = this.$isFF ? 355 : 350;//486
      return `${this.documentHeight - hei}`;
    },
    screen() {
      if (this.$store.getters.theme === "light") {
        return this.isFullscreen ? "screen-off-l" : "screen-on-l";
      } else {
        return this.isFullscreen ? "screen-off-d" : "screen-on-d";
      }
    }
  },
  created() {
    // console.log(this.transData)
  },
  mounted() {
    var date = new Date();
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var day = date.getDate() - 1;
    month = (month > 9) ? month : ("0" + month);
    day = (day < 10) ? ("0" + day) : day;
    this.date = year + "-" + month + "-" + day;
    this.getdata();
  }
};
</script>
<style>
#lll .el-table .el-table__cell {
  padding: 0;
}

#lll .el-card__body, .el-main-main {
  padding: 0px;
}

.el-table .el-table__cell {
  padding: 3.5px 0;
}

#posts .el-input--suffix .el-input__inner {
  padding-right: 0px;
}

#posts .el-input__inner {
  height: 25px;
  line-height: 25px;
  border-radius: 15px;
}
</style>
<style scoped>

</style>
